// routes.js
Page({
  data: {
    // 页面基础数据
    query: {},
    navHeight: 0,
    viewportHeight: 0,
    screenWidth: 0,
    
    // 图片数据
    imageWidth: 800,
    imageHeight: 600,
    imageSrc: '/images/手绘地图.jpg',
    
    // 缩放控制 - 只使用索引，不直接操作scale值
    currentScaleIndex: 0, // 默认3.75倍，对应presetScales[4]
    presetScales: [3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75],
    
    // 拖拽状态
    isDragging: false,
    dragStartX: 0,
    dragStartY: 0,
    initialOffsetX: 0,  // 拖拽开始时的初始偏移量
    initialOffsetY: 0,  // 拖拽开始时的初始偏移量
    imageOffsetX: 0,  // 图片相对于容器的X偏移
    imageOffsetY: 0,  // 图片相对于容器的Y偏移
    
    // 景点数据
    scenicSpots: [
      {
        id: 1,
        name: "黑麋峰观景台",
        location: "黑麋峰山顶",
        image: "/images/景点-1.jpg",
        rating: 5,
        distance: "0.5km",
        description: "黑麋峰最高观景点，可俯瞰整个景区"
      },
      {
        id: 2,
        name: "玻璃栈道",
        location: "黑麋峰半山腰",
        image: "/images/景点-2.jpg",
        rating: 4,
        distance: "1.2km",
        description: "刺激的玻璃栈道体验，感受高空漫步"
      },
      {
        id: 3,
        name: "瀑布群",
        location: "黑麋峰山脚",
        image: "/images/景点-3.jpg",
        rating: 5,
        distance: "2.1km",
        description: "多级瀑布群，水声潺潺，景色优美"
      },
      {
        id: 4,
        name: "森林步道",
        location: "黑麋峰山腰",
        image: "/images/景点-4.jpg",
        rating: 4,
        distance: "1.8km",
        description: "幽静的森林步道，适合徒步和拍照"
      },
      {
        id: 5,
        name: "观景亭",
        location: "黑麋峰山顶",
        image: "/images/攻略照片1.jpg",
        rating: 3,
        distance: "0.8km",
        description: "古色古香的观景亭，休息观景两相宜"
      }
    ],
    
    // 景点卡片相关
    centerIndex: 0,
    scrollLeft: 0,
    isAutoScrolling: false
  },

  onLoad(options) {
    this.setData({ query: options || {} })
    this.initPage()
  },

  onUnload() {
    // 清理定时器
    if (this.scrollTimer) clearTimeout(this.scrollTimer)
    if (this.animationTimer) clearTimeout(this.animationTimer)
  },

  // 页面初始化
  initPage() {
    const systemInfo = wx.getSystemInfoSync()
    this.setData({
      screenWidth: systemInfo.windowWidth,
      viewportHeight: systemInfo.windowHeight
    })
    
    // 计算两端占位宽度，使首尾卡片能够居中
    const cardWidth = 140
    const containerLeftPadding = 16 // 与 .spots-container 左侧 padding 一致
    const sideSpacerWidth = Math.max(0, systemInfo.windowWidth / 2 - cardWidth / 2 - containerLeftPadding)
    this.setData({ sideSpacerWidth })

    this.loadImageInfo()
  },

  // 加载图片信息
  loadImageInfo() {
    wx.getImageInfo({
      src: this.data.imageSrc,
      success: (res) => {
        this.setData({
          imageWidth: res.width,
          imageHeight: res.height
        })
        console.log('图片加载成功:', { width: res.width, height: res.height })
      },
      fail: () => {
        console.log('使用默认图片尺寸')
      }
    })
  },

  // 获取窗口尺寸信息
  getWindowInfo() {
    const { screenWidth, viewportHeight, imageWidth, imageHeight, currentScaleIndex, presetScales } = this.data
    const scale = presetScales[currentScaleIndex]
    const canDrag = (imageWidth * scale > screenWidth) || (imageHeight * scale > viewportHeight)
    
    console.log('窗口信息:', { 
      screenWidth, viewportHeight,
      imageWidth, imageHeight, scale, 
      scaledWidth: imageWidth * scale, scaledHeight: imageHeight * scale,
      canDrag 
    })
  },

  // 导航栏高度变化
  onNavHeightChange(e) {
    const { totalHeight } = e.detail
    const viewportHeight = wx.getSystemInfoSync().windowHeight - totalHeight
    
    this.setData({
      navHeight: totalHeight,
      viewportHeight
    })
    
    console.log('视口高度更新:', viewportHeight)
  },

  // 放大
  onZoomIn() {
    const { currentScaleIndex, presetScales } = this.data
    if (currentScaleIndex < presetScales.length - 1) {
      const newIndex = currentScaleIndex + 1
      
      this.setData({
        currentScaleIndex: newIndex
      })
      
      // 重新计算边界
      setTimeout(() => {
        this.recalculateBounds()
      }, 50)
      
      console.log('放大到:', presetScales[newIndex])
    }
  },

  // 缩小
  onZoomOut() {
    const { currentScaleIndex, presetScales } = this.data
    if (currentScaleIndex > 0) {
      const newIndex = currentScaleIndex - 1
      
      this.setData({
        currentScaleIndex: newIndex
      })
      
      // 重新计算边界
      setTimeout(() => {
        this.recalculateBounds()
      }, 50)
      
      console.log('缩小到:', presetScales[newIndex])
    }
  },

  // 重置视图
  onResetView() {
    this.setData({
      currentScaleIndex: 0, // 3.75倍
      imageOffsetX: 0,
      imageOffsetY: 0
    })
    
    console.log('重置视图到3.75倍')
  },

  // 居中显示
  onCenterImage() {
    this.setData({
      currentScaleIndex: 0,
      imageOffsetX: 0,
      imageOffsetY: 0
    })
    console.log('居中显示')
  },

  // 显示全部
  onShowAll() {
    this.setData({
      currentScaleIndex: 4, // 3.75倍
      imageOffsetX: 0,
      imageOffsetY: 0
    })
    
    console.log('显示全部')
  },

  // 导航栏返回
  onNavBackTap() {
    wx.navigateBack({
      delta: 1,
      fail: () => {
        wx.redirectTo({ url: '/pages/index/index' })
      }
    })
  },

  // 景点卡片点击
  onSpotCardTap(e) {
    const spot = e.currentTarget.dataset.spot
    wx.navigateTo({
      url: `/pages/scenic-detail/scenic-detail?id=${spot.id}&name=${encodeURIComponent(spot.name)}`
    })
  },

  // 滚动视图滚动事件
  onScrollViewScroll(e) {
    const { scrollLeft } = e.detail
    const cardWidth = 140
    const cardGap = 12
    const totalCardWidth = cardWidth + cardGap
    const screenWidth = this.data.screenWidth
    const containerLeftPadding = 16 // 与 .spots-container 左侧 padding 一致
    
    // 计算屏幕中心位置
    const screenCenter = screenWidth / 2
    
    // 计算每个卡片在屏幕上的位置（选择距离中心最近的卡片）
    const cards = this.data.scenicSpots
    let targetIndex = 0
    let minDistance = Number.POSITIVE_INFINITY
    
    // 由于左右加入了 sideSpacer，占位宽度会影响首卡位置
    const sideSpacerWidth = this.data.sideSpacerWidth || 0
    for (let i = 0; i < cards.length; i++) {
      // 需要考虑容器的左侧 padding 与左侧占位偏移
      const cardLeft = containerLeftPadding + sideSpacerWidth + i * totalCardWidth - scrollLeft
      const cardCenter = cardLeft + cardWidth / 2
      const distance = Math.abs(cardCenter - screenCenter)
      if (distance < minDistance) {
        minDistance = distance
        targetIndex = i
      }
    }
    
    // 确保索引在有效范围内
    const maxIndex = cards.length - 1
    const clampedIndex = Math.max(0, Math.min(targetIndex, maxIndex))
    
    this.setData({ centerIndex: clampedIndex })
  },

  // 滑动结束处理（边界事件）
  onScrollViewScrollEnd() {
    console.log('滑动到达边界')
  },

  // 拖拽开始
  onTouchStart(e) {
    const touch = e.touches[0]
    console.log('拖拽开始:', { 
      x: touch.clientX, 
      y: touch.clientY,
      currentOffsetX: this.data.imageOffsetX,
      currentOffsetY: this.data.imageOffsetY
    })
    this.setData({
      isDragging: true,
      dragStartX: touch.clientX,
      dragStartY: touch.clientY,
      initialOffsetX: this.data.imageOffsetX,  // 记录拖拽开始时的偏移量
      initialOffsetY: this.data.imageOffsetY
    })
  },

  // 拖拽移动
  onTouchMove(e) {
    if (!this.data.isDragging) return
    
    const touch = e.touches[0]
    // 计算相对于初始触摸点的总位移
    const totalDeltaX = touch.clientX - this.data.dragStartX
    const totalDeltaY = touch.clientY - this.data.dragStartY
    
    // 计算新的偏移量（基于初始偏移量）
    const newOffsetX = this.data.initialOffsetX + totalDeltaX
    const newOffsetY = this.data.initialOffsetY + totalDeltaY
    
    // 计算边界限制 - 使用微信窗口尺寸
    const { screenWidth, viewportHeight, imageWidth, imageHeight, currentScaleIndex, presetScales } = this.data
    const scale = presetScales[currentScaleIndex]
    
    // 计算缩放后的图片尺寸
    const scaledImageWidth = imageWidth * scale
    const scaledImageHeight = imageHeight * scale
    
    console.log('拖拽移动:', {
      totalDeltaX, totalDeltaY,
      newOffsetX, newOffsetY,
      screenWidth, viewportHeight,
      scaledImageWidth, scaledImageHeight,
      scale
    })
    
    // 计算边界限制 - 确保图片边缘不超出微信窗口边界
    let minOffsetX, maxOffsetX, minOffsetY, maxOffsetY
    
    if (scaledImageWidth > screenWidth) {
      // 图片宽度大于窗口宽度，可以拖拽，但边缘不能超出窗口
      const overflowX = (scaledImageWidth - screenWidth) / 2
      minOffsetX = -overflowX
      maxOffsetX = overflowX
    } else {
      // 图片宽度小于等于窗口宽度，不能拖拽出窗口
      minOffsetX = 0
      maxOffsetX = 0
    }
    
    if (scaledImageHeight > viewportHeight) {
      // 图片高度大于窗口高度，可以拖拽，但边缘不能超出窗口
      const overflowY = (scaledImageHeight - viewportHeight) / 2
      minOffsetY = -overflowY
      maxOffsetY = overflowY
    } else {
      // 图片高度小于等于窗口高度，不能拖拽出窗口
      minOffsetY = 0
      maxOffsetY = 0
    }
    
    // 限制偏移量在边界内
    const clampedOffsetX = Math.max(minOffsetX, Math.min(maxOffsetX, newOffsetX))
    const clampedOffsetY = Math.max(minOffsetY, Math.min(maxOffsetY, newOffsetY))
    
    console.log('边界计算:', { 
      minOffsetX, maxOffsetX, minOffsetY, maxOffsetY,
      clampedOffsetX, clampedOffsetY,
      isClamped: clampedOffsetX !== newOffsetX || clampedOffsetY !== newOffsetY,
      imageLeftEdge: newOffsetX - scaledImageWidth/2,
      imageRightEdge: newOffsetX + scaledImageWidth/2,
      windowLeftEdge: -screenWidth/2,
      windowRightEdge: screenWidth/2
    })
    
    this.setData({
      imageOffsetX: clampedOffsetX,
      imageOffsetY: clampedOffsetY
    })
  },

  // 拖拽结束
  onTouchEnd(e) {
    this.setData({
      isDragging: false
    })
  },

  // 缩放时重新计算边界
  recalculateBounds() {
    const { screenWidth, viewportHeight, imageWidth, imageHeight, currentScaleIndex, presetScales, imageOffsetX, imageOffsetY } = this.data
    const scale = presetScales[currentScaleIndex]
    
    // 计算缩放后的图片尺寸
    const scaledImageWidth = imageWidth * scale
    const scaledImageHeight = imageHeight * scale
    
    // 计算边界限制 - 确保图片边缘不超出微信窗口边界
    let minOffsetX, maxOffsetX, minOffsetY, maxOffsetY
    
    if (scaledImageWidth > screenWidth) {
      // 图片宽度大于窗口宽度，可以拖拽，但边缘不能超出窗口
      const overflowX = (scaledImageWidth - screenWidth) / 2
      minOffsetX = -overflowX
      maxOffsetX = overflowX
    } else {
      // 图片宽度小于等于窗口宽度，不能拖拽出窗口
      minOffsetX = 0
      maxOffsetX = 0
    }
    
    if (scaledImageHeight > viewportHeight) {
      // 图片高度大于窗口高度，可以拖拽，但边缘不能超出窗口
      const overflowY = (scaledImageHeight - viewportHeight) / 2
      minOffsetY = -overflowY
      maxOffsetY = overflowY
    } else {
      // 图片高度小于等于窗口高度，不能拖拽出窗口
      minOffsetY = 0
      maxOffsetY = 0
    }
    
    // 检查当前偏移量是否超出新边界
    const clampedOffsetX = Math.max(minOffsetX, Math.min(maxOffsetX, imageOffsetX))
    const clampedOffsetY = Math.max(minOffsetY, Math.min(maxOffsetY, imageOffsetY))
    
    console.log('重新计算边界:', {
      scaledImageWidth, scaledImageHeight,
      minOffsetX, maxOffsetX, minOffsetY, maxOffsetY,
      currentOffsetX: imageOffsetX, currentOffsetY: imageOffsetY,
      clampedOffsetX, clampedOffsetY,
      needsAdjustment: clampedOffsetX !== imageOffsetX || clampedOffsetY !== imageOffsetY
    })
    
    if (clampedOffsetX !== imageOffsetX || clampedOffsetY !== imageOffsetY) {
      this.setData({
        imageOffsetX: clampedOffsetX,
        imageOffsetY: clampedOffsetY
      })
    }
  },

  // 测试拖拽功能
  onTestDrag() {
    console.log('测试拖拽功能')
    
    const { screenWidth, viewportHeight, imageWidth, imageHeight, currentScaleIndex, presetScales, imageOffsetX, imageOffsetY } = this.data
    const scale = presetScales[currentScaleIndex]
    
    // 计算缩放后的图片尺寸
    const scaledImageWidth = imageWidth * scale
    const scaledImageHeight = imageHeight * scale
    
    // 计算边界限制 - 确保图片边缘不超出微信窗口边界
    let minOffsetX, maxOffsetX, minOffsetY, maxOffsetY
    
    if (scaledImageWidth > screenWidth) {
      // 图片宽度大于窗口宽度，可以拖拽，但边缘不能超出窗口
      const overflowX = (scaledImageWidth - screenWidth) / 2
      minOffsetX = -overflowX
      maxOffsetX = overflowX
    } else {
      // 图片宽度小于等于窗口宽度，不能拖拽出窗口
      minOffsetX = 0
      maxOffsetX = 0
    }
    
    if (scaledImageHeight > viewportHeight) {
      // 图片高度大于窗口高度，可以拖拽，但边缘不能超出窗口
      const overflowY = (scaledImageHeight - viewportHeight) / 2
      minOffsetY = -overflowY
      maxOffsetY = overflowY
    } else {
      // 图片高度小于等于窗口高度，不能拖拽出窗口
      minOffsetY = 0
      maxOffsetY = 0
    }
    
    console.log('测试数据:', {
      screenWidth, viewportHeight,
      imageWidth, imageHeight,
      currentScaleIndex, scale,
      scaledImageWidth, scaledImageHeight,
      minOffsetX, maxOffsetX, minOffsetY, maxOffsetY,
      currentOffsetX: imageOffsetX,
      currentOffsetY: imageOffsetY
    })
    
    // 测试移动图片（考虑边界）
    const newOffsetX = Math.max(minOffsetX, Math.min(maxOffsetX, imageOffsetX + 50))
    const newOffsetY = Math.max(minOffsetY, Math.min(maxOffsetY, imageOffsetY + 50))
    
        this.setData({
      imageOffsetX: newOffsetX,
      imageOffsetY: newOffsetY
    })
    
    console.log('测试移动结果:', { newOffsetX, newOffsetY })
  },

  // 强制边界检查
  forceBoundaryCheck() {
    console.log('强制边界检查')
    
    const { screenWidth, viewportHeight, imageWidth, imageHeight, currentScaleIndex, presetScales, imageOffsetX, imageOffsetY } = this.data
    const scale = presetScales[currentScaleIndex]
    
    // 计算缩放后的图片尺寸
    const scaledImageWidth = imageWidth * scale
    const scaledImageHeight = imageHeight * scale
    
    console.log('当前状态:', {
      screenWidth, viewportHeight,
      imageWidth, imageHeight, scale,
      scaledImageWidth, scaledImageHeight,
      currentOffsetX: imageOffsetX,
      currentOffsetY: imageOffsetY
    })
    
    // 强制设置一个超出边界的偏移量来测试
    const testOffsetX = 1000
    const testOffsetY = 1000
    
    // 计算边界限制 - 使用微信窗口尺寸
    let minOffsetX, maxOffsetX, minOffsetY, maxOffsetY
    
    if (scaledImageWidth > screenWidth) {
      const overflowX = (scaledImageWidth - screenWidth) / 2
      minOffsetX = -overflowX
      maxOffsetX = overflowX
    } else {
      minOffsetX = 0
      maxOffsetX = 0
    }
    
    if (scaledImageHeight > viewportHeight) {
      const overflowY = (scaledImageHeight - viewportHeight) / 2
      minOffsetY = -overflowY
      maxOffsetY = overflowY
    } else {
      minOffsetY = 0
      maxOffsetY = 0
    }
    
    // 限制偏移量
    const clampedOffsetX = Math.max(minOffsetX, Math.min(maxOffsetX, testOffsetX))
    const clampedOffsetY = Math.max(minOffsetY, Math.min(maxOffsetY, testOffsetY))
    
    console.log('边界检查结果:', {
      testOffsetX, testOffsetY,
      minOffsetX, maxOffsetX, minOffsetY, maxOffsetY,
      clampedOffsetX, clampedOffsetY,
      isClamped: clampedOffsetX !== testOffsetX || clampedOffsetY !== testOffsetY
    })
    
    this.setData({
      imageOffsetX: clampedOffsetX,
      imageOffsetY: clampedOffsetY
    })
  }
})


